<template>
  <f7-page class="step-body1">
    <div class="header-f7">
      <f7-link
        back
        icon-f7="chevron_left"
        color="white"
        size='34px'
      ></f7-link>
    </div>
    <f7-block class="f7-block">
      <f7-block-title class="block-title">访客预约</f7-block-title>
      <f7-row class="f7-row">
        <ul>
          <li class="it-li">
            <div class="ul-li">1</div>
          </li>
          <li class="ellipsis">...................</li>
          <li>
            <div class="ul-li2">2</div>
          </li>
          <li class="ellipsis">...................</li>
          <li>
            <div class="ul-li2">3</div>
          </li>
        </ul>
      </f7-row>
      <f7-row class="f7-row2">
        <ul>
          <li class="ul-li">被访单位</li>
          <li class="ul-li2">来访人信息</li>
          <li class="ul-li2">提交预约</li>
        </ul>
        <img src="static/img/step/index1/qiche.svg" alt="" class="img1" />
        <img src="static/img/step/index1/mubiao.svg" alt="" class="img2" />
      </f7-row>
      <f7-row class="f7-row3">
        <f7-card class="f7-card">
          <div class="noticebar">
            <qm-notice-bar
              :noticebar="noticebar"
              :left-icon="noticebar.icon"
              wrapable
              :scrollable="false"
              :text="noticebar.title"
            ></qm-notice-bar>
          </div>
          <div class="card-title">请选择单位</div>
          <qm-field
            label="被访单位"
            required
            placeholder="请选择"
            arrow-direction="down"
            :is-link="true"
            readonly
          >
          </qm-field>
          <ul class="footnote">
            <li>注：</li>
            <li>1、一次可以预约一个单位</li>
            <li>2、疫情期间，请大家xxxxxxxxxxxxxxxx</li>
          </ul>
          <f7-button raised fill round class="f7-button">下一步</f7-button>
        </f7-card>
      </f7-row>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      show: "false",
      noticebar: {
        icon: "static/img/step/index1/icon_tongzhi.svg",
        title:
          "小时内提交预约申请单，工作日可预约时间段为小时内提交预约申请单，工作日可预  ",
      },
    };
  },
};
</script>

<style lang="less" scoped>

.step-body1 {
  position: relative;
  .header-f7{
    position: absolute;
    top: 5px;
    left: 5%;
    z-index: 3;
  }
  .f7-block {
    margin: 0px;
    padding: 0px;
    background: url('../../../../static/img/step/index1/bg_liucheng.png') no-repeat;
    background-size: 100% calc(336px * var(--ratio));
    background-attachment: fixed;
    width: 100%;
    // height: calc(352px * var(--ratio));

    .block-title {
      text-align: center;
      color: var(--color-text-base);
      padding-top: calc(20px * var(--ratio));
      margin-bottom: calc(62px * var(--ratio));
      font-size: calc(37px * var(--ratio));
    }

    .f7-row {
      ul {
        margin: 0px calc(93px * var(--ratio));
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin-bottom: calc(28px * var(--ratio));

        .ellipsis {
          color: #ffffffb3;
        }
        .it-li{
          border: 2px solid rgba(255, 255, 255, 0.21);
          border-radius: 50%;
        }
        li {
          text-align: center;
          .ul-li {
            width: calc(54px * var(--ratio));
            height: calc(54px * var(--ratio));
            border-radius: 50%;
            line-height: calc(54px * var(--ratio));
            text-align: center;
            background-color: var(--color-fill-grey-inverse);
            color: var(--color-brand);

          }

          .ul-li2 {
            width: calc(54px * var(--ratio));
            height: calc(54px * var(--ratio));
            border-radius: 50%;
            line-height: calc(54px * var(--ratio));
            text-align: center;
            background-color: #ffffffb3;
            ;
            color: var(--color-brand);
          }
        }

      }
    }

    .f7-row2 {
      padding-bottom: calc(80px * var(--ratio));
      position: relative;

      ul {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin: 0px 5px;

        .ul-li {
          color: var(--color-fill-grey-inverse);
          font-size: calc(30px * var(--ratio));

        }

        .ul-li2 {
          color: #ffffffb3;
          font-size: calc(30px * var(--ratio));
        }
      }

      .img1 {
        position: absolute;
        bottom: -14%;
        left: 4%;
        width: calc(134px * var(--ratio));
        height: calc(46px * var(--ratio));
        z-index: 1;
      }

      .img2 {
        position: absolute;
        bottom: -14%;
        right: 4%;
        width: calc(34px * var(--ratio));
        height: calc(45px * var(--ratio));
        z-index: 1;
      }
    }

    .f7-row3 {
      margin: -2px;
      padding: 0px;

      .f7-card {
        margin: 0px;
        padding: calc(50px * var(--ratio)) calc(34px * var(--ratio)) 0px;
        width: 100%;
        --f7-card-box-shadow: var(--color-fill-grey-inverse);
        --f7-card-border-radius: 11px;
        --f7-button-raised-box-shadow:#ffff;
        .card-title {
          margin-left:7px;
          margin-top: calc(40px * var(--ratio));
          font-size: calc(36px * var(--ratio));
          font-weight: 500;
          color: var(--color-text-title);
        }

        .footnote {
          margin-top: calc(60px * var(--ratio));
          margin-bottom: calc(40px * var(--ratio));
          font-size: calc(24px * var(--ratio));
          color: var(--color-text-weak);
        }

        .f7-button {
          background-color: #3385ff67;
          color: var(--color-fill-grey-inverse);
          height: calc(96px * var(--ratio));
          line-height: calc(96px * var(--ratio));
          --f7-button-raised-box-shadow:#ffff;
        }
      }


    }
  }


}

</style>
